<template>
  <div
    class="el-switch"
    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
    role="switch"
    :aria-checked="checked"
    :aria-disabled="switchDisabled"
    @click.prevent="switchValue"
  >
    <input
      :id="id"
      ref="input"
      class="el-switch__input"
      type="checkbox"
      :name="name"
      :true-value="activeValue"
      :false-value="inactiveValue"
      :disabled="switchDisabled"
      @change="handleChange"
      @keydown.enter="switchValue"
    />
    <span
      v-if="!inlinePrompt && (inactiveIcon || inactiveText)"
      :class="[
        'el-switch__label',
        'el-switch__label--left',
        !checked ? 'is-active' : '',
      ]"
    >
      <el-icon v-if="inactiveIcon"><component :is="inactiveIcon" /></el-icon>
      <span v-if="!inactiveIcon && inactiveText" :aria-hidden="checked">{{
        inactiveText
      }}</span>
    </span>
    <span
      ref="core"
      class="el-switch__core"
      :style="{ width: (width || 40) + 'px' }"
    >
      <div v-if="inlinePrompt" class="el-switch__inner">
        <template v-if="activeIcon || inactiveIcon">
          <el-icon
            v-if="activeIcon"
            class="is-icon"
            :class="checked ? 'is-show' : 'is-hide'"
          >
            <component :is="activeIcon" />
          </el-icon>
          <el-icon
            v-if="inactiveIcon"
            class="is-icon"
            :class="!checked ? 'is-show' : 'is-hide'"
          >
            <component :is="inactiveIcon" />
          </el-icon>
        </template>
        <template v-else-if="activeText || inactiveIcon">
          <span
            v-if="activeText"
            class="is-text"
            :class="checked ? 'is-show' : 'is-hide'"
            :aria-hidden="!checked"
          >
            {{ activeText.substr(0, 1) }}
          </span>
          <span
            v-if="inactiveText"
            class="is-text"
            :class="!checked ? 'is-show' : 'is-hide'"
            :aria-hidden="checked"
          >
            {{ inactiveText.substr(0, 1) }}
          </span>
        </template>
      </div>
      <div class="el-switch__action">
        <el-icon v-if="loading" class="is-loading"><loading /></el-icon>
      </div>
    </span>
    <span
      v-if="!inlinePrompt && (activeIcon || activeText)"
      :class="[
        'el-switch__label',
        'el-switch__label--right',
        checked ? 'is-active' : '',
      ]"
    >
      <el-icon v-if="activeIcon"><component :is="activeIcon" /></el-icon>
      <span v-if="!activeIcon && activeText" :aria-hidden="!checked">{{
        activeText
      }}</span>
    </span>
  </div>
</template>
